import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 导入布局组件
import MainLayout from "@/components/layout/index.vue";
// 导入页面组件
import NotFoundView from "@/views/NotFoundView.vue";
import HomeView from "@/views/HomeView.vue";
import AboutView from "@/views/AboutView.vue";
import richEditor from "@/views/richEditor/index.vue";
import pagination from "@/views/pagination/index.vue";
import advancedFilter from "@/views/advancedFilter/index.vue";
import carousel from "@/views/carousel/index.vue";
import ai from "@/views/ai/index.vue";
import qrCode from "@/views/qrCode/index.vue";
import sortCode from "@/views/sortCode/index.vue";
import card from "@/views/card/index.vue";
import daoChu from "@/views/daoChu/index.vue";
import allTools from "@/views/allTools/index.vue";
import signature from "@/views/signature/index.vue";

// 路由规则
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "MainLayout",
    component: MainLayout,
    children: [
      {
        path: "",
        name: "Home",
        component: HomeView,
        meta: {
          title: "首页",
        },
      },
      {
        path: "about",
        name: "About",
        component: AboutView,
        meta: {
          title: "关于我们",
        },
      },
      {
        path: "/richEditor",
        name: "richEditor",
        component: richEditor,
        meta: {
          title: "富文本编辑器",
        },
      },
      {
        path: "/pagination",
        name: "pagination",
        component: pagination,
        meta: {
          title: "分页组件",
        },
      },
      {
        path: "/advancedFilter",
        name: "advancedFilter",
        component: advancedFilter,
        meta: {
          title: "筛选组件",
        },
      },
      {
        path: "/carousel",
        name: "carousel",
        component: carousel,
        meta: {
          title: "跑马灯组件",
        },
      },
      {
        path: "/ai",
        name: "ai",
        component: ai,
        meta: {
          title: "AI",
        },
      },
      {
        path: "/qrCode",
        name: "qrCode",
        component: qrCode,
        meta: {
          title: "二维码组件",
        },
      },
       {
        path: "/sortCode",
        name: "sortCode",
        component: sortCode,
        meta: {
          title: "修改表格组件",
        },
      },
      {
        path: "/card",
        name: "card",
        component: card,
        meta: {
          title: "双选卡片组件",
        },
      },
      {
        path: "/daoChu",
        name: "daoChu",
        component: daoChu,
        meta: {
          title: "导出组件",
        },
      },
      {
        path: "/allTools",
        name: "allTools",
        component: allTools,
        meta: {
          title: "工具函数使用方法",
        },
      },
       {
        path: "/signature",
        name: "signature",
        component: signature,
        meta: {
          title: "签字板组件",
        },
      },
    ],
  },
  // 404页面
  {
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    component: NotFoundView,
    meta: {
      title: "页面未找到",
    },
  },
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

// 路由守卫 - 设置页面标题
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title as string;
  }
  next();
});

export default router;
